<template>
  <div id="home">
    <NavBar class="home-nav"><div slot="center">购物街</div></NavBar>
    <Scroll class="content" ref="scroll" :probeType="3">
      <homeswiper :banners="banners"></homeswiper>
      <homerecommend :recommends="recommends"></homerecommend>
      <a href=""><img src="~assets/images/home/recommend_bg.jpg" alt=""></a>
      <tabcontrol :titles="titles" :class="{tabstick:isStick}" @tabclick="tabclick"></tabcontrol>
      <goodsList :goods="goods[currenttype].list"></goodsList>
    </Scroll>
    <backTop></backTop>
  </div>
</template>

<script>
  import tabcontrol from 'components/contents/tabControl/tabcontrol';
  import NavBar from 'components/common/navbar/Navbar';
  import Scroll from 'components/common/scroller/Scroll';
  import backTop from 'components/common/scroller/backTop';


  import {getHomeMultiData,getGoodsData} from 'network/home';
  import homeswiper from './childComp/homeswiper.vue';
  import homerecommend from './childComp/homerecommend.vue';
  import goodsList from 'components/contents/good/goodslist';
  import detail from 'views/detail/detail';
  export default {
      name: "Home",
      components:{
        NavBar,
        homeswiper,
        homerecommend,
        tabcontrol,
        goodsList,
        Scroll,
        detail,
        backTop
      },
      data(){
        return{
          banners : [],
          recommends:[],
          titles:['流行','新款','精选'],
          goods:{
            'pop':{page:0,list:[]},
            'new':{page:0,list:[]},
            'sell':{page:0,list:[]}
          },
          currenttype:'pop',
          isStick:false
        }
      },
      created(){
        this.getHomeMultiData()
        this.getGoodsData('pop')
        this.getGoodsData('new')
        this.getGoodsData('sell')
      },
      mounted(){
        let content = document.querySelector(".content")
        window.addEventListener('scroll',this.loadMore,true)
        window.addEventListener('scroll',this.stickTab,true)
      },
      methods:{
        tabclick(index){
          switch (index){
            case 0 :
              this.currenttype = 'pop'
              break
            case 1:
              this.currenttype = 'new'
              break
            case 2:
              this.currenttype = 'sell'
              break
          }
        },
       
        loadMore(){
          if(document.documentElement.scrollTop > 100000){
            return
          }
          // console.log(document.documentElement.scrollTop);
          // console.log(123);
          if(document.documentElement.scrollTop + document.documentElement.clientHeight == document.documentElement.scrollHeight){
            this.getGoodsData(this.currenttype)
            
          }
        },
        stickTab(){
         if(document.documentElement.scrollTop>603){
           this.isStick=true
         }else{
           this.isStick = false
         }
        },
        





        getHomeMultiData(){
          getHomeMultiData().then(res=>{
          this.banners = res.data.banner.list
          this.recommends = res.data.recommend.list
        })
        },
        getGoodsData(type){
            const page = this.goods[type].page +1
            getGoodsData(type,page).then(res=>{
              this.goods[type].list.push(...res.data.list)
              this.goods[type].page++
            })

            
        }
      }
  }
</script>

<style scoped>
  #home {
    padding-top: 44px;
    height: 100vh;
    position: relative;
  }
.home-nav{
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color-tint);
  z-index: 9;
}
#home a img{
  width: 100%;
}
.tabstick{
  width: 100%;
  position: fixed;
  top: 44px;
  z-index: 8;
}
.content{
  /* overflow: hidden; */
    position: absolute;
    top: 44px;
    bottom: 49px;
    right: 0;
    left: 0;
    /* height: 300px; */
}
</style>
